import { SvgIcon } from '@/components/icon';
import NotData from '@/components/NotData';
import { Skeleton } from 'antd';
import { Tooltip, AntdPagination } from '@/components/eai-design';
interface FrequencyListProps {
  frequencyDataList?: {
    filename: string;
    frequency: number;
    username: string;
    _id: string;
  }[];
  statisticsLoading: boolean;
  tooltipMap: Record<string, string>;
  currentPage: number;
  pageSize: number;
  total: number;
  onPageChange: (page: number, pageSize: number) => void;
}
const frequencyList = ({
  frequencyDataList,
  statisticsLoading,
  tooltipMap,
  currentPage,
  pageSize,
  total,
  onPageChange,
}: FrequencyListProps) => {
  return (
    <div className="w-1/2 rounded-default bg-white p-4">
      <div className="mb-2 flex items-center text-xl font-semibold">
        <div className="mr-2 h-3 w-3  rounded-full border-[3px] border-[#1B6DFA]"></div>
        高频文档排行
        <Tooltip title={tooltipMap['documentRanking']}>
          <div className="flex">
            <SvgIcon size={16} icon="report-is1" className="ml-1" />
          </div>
        </Tooltip>
      </div>
      {statisticsLoading ? (
        <Skeleton active paragraph={{ rows: 5 }} style={{ padding: '10px' }} />
      ) : (
        <div>
          {total !== 0 ? (
            <div className=" hide-scrollbar h-[300px] flex-1 overflow-auto">
              {/* 表头 */}
              <div className="flex items-center border-b border-line-2 py-2 text-sm text-text-3">
                <div className="w-14 pl-2">#</div>
                <div className="flex-1">文件名</div>
                <div className="w-40">上传人</div>
                <div className="w-28 pr-2 text-right">被引用次数</div>
              </div>
              <ol className="!ml-0">
                {frequencyDataList?.map((item, idx) => {
                  const rank = idx + 1;
                  const rankText = rank < 10 ? `0${rank}` : String(rank);
                  const badgeCls =
                    rank === 1
                      ? 'bg-red-1 text-red-5'
                      : rank === 2
                      ? 'bg-orange-1 text-orange-5'
                      : rank === 3
                      ? 'bg-orange-1 text-orange-5'
                      : ' text-text-3';
                  return (
                    <li
                      key={item._id || idx}
                      className="flex items-center border-b border-gray-100 py-3 text-sm"
                    >
                      <div className="w-14">
                        <span
                          className={`inline-flex h-6 w-6 items-center justify-center rounded-full text-sm ${badgeCls}`}
                        >
                          {rankText}
                        </span>
                      </div>
                      <div className="min-w-0 flex-1 pr-4">
                        <Tooltip title={item.filename} placement="topLeft">
                          <span className="block truncate text-text-5">{item.filename}</span>
                        </Tooltip>
                      </div>
                      <div className="w-40 truncate text-text-5">{item.username}</div>
                      <div className="w-28 pr-2 text-right font-semibold text-text-5">
                        {item.frequency}
                      </div>
                    </li>
                  );
                })}
              </ol>
            </div>
          ) : (
            <div className="h-[280px]">
              <NotData />
            </div>
          )}
        </div>
      )}

      {total !== 0 && (
        <div className="mt-1 flex items-center justify-between text-xs text-text-4">
          <div className="text-sm text-text-4">共 {total} 项数据</div>
          <AntdPagination
            current={currentPage}
            pageSize={pageSize}
            total={total}
            onChange={onPageChange}
            showSizeChanger={false}
            size="small"
          />
        </div>
      )}
    </div>
  );
};
export default frequencyList;
